<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import dayjs from 'dayjs'
import { CreateElement } from 'vue'
import { formatDate } from '@/utils'

@Component({
  name: 'RenderDate'
})
export default class extends Vue {
  private isValid (date: string | number | Date | null | undefined): boolean {
    if (date === undefined || date === null) {
      return false
    } else {
      return dayjs(date).isValid()
    }
  }

  render (h: CreateElement) {
    return h('el-table-column', {
      props: this.$attrs,
      scopedSlots: {
        default: ({ row }) =>
          this.isValid(row[this.$attrs.prop])
            ? [
              h('i', {
                class: 'el-icon-time',
                style: { marginRight: '5px' }
              }),
              formatDate(row[this.$attrs.prop])
            ]
            : null
      }
    })
  }
}
</script>
